<template>
  <main class=" pug-pro-basicLayout-content pug-pro-basicLayout-has-header">
    <div  v-show="!sketon"  class="box1">
      <div class="bgMasker line1"></div>
      <div class="bgMasker line2"></div>
      <div class="bgMasker line3"></div>
      <div class="bgMasker line4"></div>
      <div class="bgMasker line5"></div>
    </div>
    <div v-show="sketon" class="pug-pro-grid-content">
      <div class="pug-pro-grid-content-children">
        <div class="pug-row" style="margin-left: -12px; margin-right: -12px; row-gap: 0px;">
          <div class="pug-col pug-col-xs-24 pug-col-sm-12 pug-col-md-12 pug-col-lg-12 pug-col-xl-6"
               style="padding-left: 12px; padding-right: 12px; margin-bottom: 24px;">
            <div class="pug-card">
              <div class="pug-card-body" style="padding: 20px 24px 8px;">
                <div class="chartCard___3TM4T">
                  <div class="chartTop___3iur-">
                    <div class="avatar___FoC4K"></div>
                    <div class="metaWrap___3Nuv1">
                      <div class="meta___1_3lt"><span>总销售额</span><span class="action___3uuUN"><span role="img"
                                                                                                    aria-label="info-circle"
                                                                                                    class="anticon anticon-info-circle"><svg
                        viewBox="64 64 896 896" focusable="false" data-icon="info-circle" width="1em" height="1em"
                        fill="currentColor" aria-hidden="true"><path
                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path
                        d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path></svg></span></span>
                      </div>
                      <div class="total___D6PP7"><span>¥ 126,560</span></div>
                    </div>
                  </div>
                  <div class="content___yyFJS" style="height: 46px;">
                    <div class="contentFixed___3tZUw">
                      <div class="trendItem___2dudO" title="" style="margin-right: 16px;"><span>周同比<span
                        class="trendText___3J91q">12%</span></span><span class="up___1wFiw"><span role="img"
                                                                                                  aria-label="caret-up"
                                                                                                  class="anticon anticon-caret-up"><svg
                        viewBox="0 0 1024 1024" focusable="false" data-icon="caret-up" width="1em" height="1em"
                        fill="currentColor" aria-hidden="true"><path
                        d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span></span>
                      </div>
                      <div class="trendItem___2dudO" title=""><span>日同比<span class="trendText___3J91q">11%</span></span><span
                        class="down___2tA2-"><span role="img" aria-label="caret-down"
                                                   class="anticon anticon-caret-down"><svg viewBox="0 0 1024 1024"
                                                                                           focusable="false"
                                                                                           data-icon="caret-down"
                                                                                           width="1em" height="1em"
                                                                                           fill="currentColor"
                                                                                           aria-hidden="true"><path
                        d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span>
                      </div>
                    </div>
                  </div>
                  <div class="footer___2Huhb">
                    <div class="field___2ZfpN"><span class="label___1hOvq">日销售额</span><span class="number___2qklC">￥12,423</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pug-col pug-col-xs-24 pug-col-sm-12 pug-col-md-12 pug-col-lg-12 pug-col-xl-6"
               style="padding-left: 12px; padding-right: 12px; margin-bottom: 24px;">
            <div class="pug-card">
              <div class="pug-card-body" style="padding: 20px 24px 8px;">
                <div class="chartCard___3TM4T">
                  <div class="chartTop___3iur-">
                    <div class="avatar___FoC4K"></div>
                    <div class="metaWrap___3Nuv1">
                      <div class="meta___1_3lt"><span>访问量</span><span class="action___3uuUN"><span role="img"
                                                                                                   aria-label="info-circle"
                                                                                                   class="anticon anticon-info-circle"><svg
                        viewBox="64 64 896 896" focusable="false" data-icon="info-circle" width="1em" height="1em"
                        fill="currentColor" aria-hidden="true"><path
                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path
                        d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path></svg></span></span>
                      </div>
                      <div class="total___D6PP7">8,846</div>
                    </div>
                  </div>
                  <div class="content___yyFJS" style="height: 46px;">
                    <div class="contentFixed___3tZUw">
                      <div data-chart-source-type="G2Plot" size-sensor-id="26" style="height: inherit;">
                        <div style="position:relative;">
                          <canvas width="346" height="46"
                                  style="width: 346px; height: 46px; display: inline-block; vertical-align: middle; cursor: default;"></canvas>
                          <div class="g2-tooltip"
                               style="position: absolute; visibility: hidden; z-index: 8; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgb(255, 255, 255); box-shadow: rgb(174, 174, 174) 0px 0px 10px; border-radius: 3px; color: rgb(89, 89, 89); font-size: 10px; font-family: &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; line-height: 12px; padding: 2px 4px; opacity: 0.95; left: 107.25px; top: 6px; pointer-events: none;">
                            4
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="footer___2Huhb">
                    <div class="field___2ZfpN"><span class="label___1hOvq">日访问量</span><span
                      class="number___2qklC">1,234</span></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pug-col pug-col-xs-24 pug-col-sm-12 pug-col-md-12 pug-col-lg-12 pug-col-xl-6"
               style="padding-left: 12px; padding-right: 12px; margin-bottom: 24px;">
            <div class="pug-card">
              <div class="pug-card-body" style="padding: 20px 24px 8px;">
                <div class="chartCard___3TM4T">
                  <div class="chartTop___3iur-">
                    <div class="avatar___FoC4K"></div>
                    <div class="metaWrap___3Nuv1">
                      <div class="meta___1_3lt"><span>支付笔数</span><span class="action___3uuUN"><span role="img"
                                                                                                    aria-label="info-circle"
                                                                                                    class="anticon anticon-info-circle"><svg
                        viewBox="64 64 896 896" focusable="false" data-icon="info-circle" width="1em" height="1em"
                        fill="currentColor" aria-hidden="true"><path
                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path
                        d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path></svg></span></span>
                      </div>
                      <div class="total___D6PP7">6,560</div>
                    </div>
                  </div>
                  <div class="content___yyFJS" style="height: 46px;">
                    <div class="contentFixed___3tZUw">
                      <div data-chart-source-type="G2Plot" size-sensor-id="27" style="height: inherit;">
                        <div style="position:relative;">
                          <canvas width="346" height="46"
                                  style="width: 346px; height: 46px; display: inline-block; vertical-align: middle;"></canvas>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="footer___2Huhb">
                    <div class="field___2ZfpN"><span class="label___1hOvq">转化率</span><span
                      class="number___2qklC">60%</span></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pug-col pug-col-xs-24 pug-col-sm-12 pug-col-md-12 pug-col-lg-12 pug-col-xl-6"
               style="padding-left: 12px; padding-right: 12px; margin-bottom: 24px;">
            <div class="pug-card">
              <div class="pug-card-body" style="padding: 20px 24px 8px;">
                <div class="chartCard___3TM4T">
                  <div class="chartTop___3iur-">
                    <div class="avatar___FoC4K"></div>
                    <div class="metaWrap___3Nuv1">
                      <div class="meta___1_3lt"><span>运营活动效果</span><span class="action___3uuUN"><span role="img"
                                                                                                      aria-label="info-circle"
                                                                                                      class="anticon anticon-info-circle"><svg
                        viewBox="64 64 896 896" focusable="false" data-icon="info-circle" width="1em" height="1em"
                        fill="currentColor" aria-hidden="true"><path
                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path
                        d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path></svg></span></span>
                      </div>
                      <div class="total___D6PP7">78%</div>
                    </div>
                  </div>
                  <div class="content___yyFJS" style="height: 46px;">
                    <div class="contentFixed___3tZUw">
                      <div data-chart-source-type="G2Plot" size-sensor-id="28" style="height: inherit;">
                        <div style="position:relative;">
                          <canvas width="346" height="46"
                                  style="width: 346px; height: 46px; display: inline-block; vertical-align: middle;"></canvas>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="footer___2Huhb">
                    <div style="white-space: nowrap; overflow: hidden;">
                      <div class="trendItem___2dudO" title="" style="margin-right: 16px;"><span>周同比<span
                        class="trendText___3J91q">12%</span></span><span class="up___1wFiw"><span role="img"
                                                                                                  aria-label="caret-up"
                                                                                                  class="anticon anticon-caret-up"><svg
                        viewBox="0 0 1024 1024" focusable="false" data-icon="caret-up" width="1em" height="1em"
                        fill="currentColor" aria-hidden="true"><path
                        d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span></span>
                      </div>
                      <div class="trendItem___2dudO" title=""><span>日同比<span class="trendText___3J91q">11%</span></span><span
                        class="down___2tA2-"><span role="img" aria-label="caret-down"
                                                   class="anticon anticon-caret-down"><svg viewBox="0 0 1024 1024"
                                                                                           focusable="false"
                                                                                           data-icon="caret-down"
                                                                                           width="1em" height="1em"
                                                                                           fill="currentColor"
                                                                                           aria-hidden="true"><path
                        d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pug-card">
          <div class="pug-card-body" style="padding: 0px;">
            <div class="salesCard___1Iqf3" style="">
              <div class="pug-tabs pug-tabs-top pug-tabs-large">
                <div role="tablist" class="pug-tabs-nav" style="margin-bottom: 24px;">
                  <div class="pug-tabs-nav-wrap">
                    <div class="pug-tabs-nav-list" style="transform: translate(0px, 0px);">
                      <div class="pug-tabs-tab pug-tabs-tab-active">
                        <div role="tab" aria-selected="true" class="pug-tabs-tab-btn" tabindex="0"
                             id="rc-tabs-2-tab-sales" aria-controls="rc-tabs-2-panel-sales">销售额
                        </div>
                      </div>
                      <div class="pug-tabs-tab">
                        <div role="tab" aria-selected="false" class="pug-tabs-tab-btn" tabindex="0"
                             id="rc-tabs-2-tab-views" aria-controls="rc-tabs-2-panel-views">访问量
                        </div>
                      </div>
                      <div class="pug-tabs-ink-bar pug-tabs-ink-bar-animated" style="left: 0px; width: 48px;"></div>
                    </div>
                  </div>
                  <div class="pug-tabs-nav-operations pug-tabs-nav-operations-hidden" style="margin-bottom: 24px;">
                    <button type="button" class="pug-tabs-nav-more" tabindex="-1" aria-hidden="true"
                            aria-haspopup="listbox" aria-controls="rc-tabs-2-more-popup" id="rc-tabs-2-more"
                            aria-expanded="false" style="visibility: hidden; order: 1;"><span role="img"
                                                                                              aria-label="ellipsis"
                                                                                              class="anticon anticon-ellipsis"><svg
                      viewBox="64 64 896 896" focusable="false" data-icon="ellipsis" width="1em" height="1em"
                      fill="currentColor" aria-hidden="true"><path
                      d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span>
                    </button>
                  </div>
                  <div class="pug-tabs-extra-content">
                    <div class="salesExtraWrap___1k1PZ">
                      <div class="salesExtra___3lIXj"><a class="">今日</a><a class="">本周</a><a class="">本月</a><a
                        class="currentDate___7lDDb">本年</a></div>
                      <div class="pug-picker pug-picker-range" style="width: 256px;">
                        <div class="pug-picker-input pug-picker-input-active"><input readonly="" placeholder="开始日期"
                                                                                     size="12" autocomplete="off"
                                                                                     value="2022-01-01"></div>
                        <div class="pug-picker-range-separator"><span aria-label="to" class="pug-picker-separator"><span
                          role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg
                          viewBox="0 0 1024 1024" focusable="false" data-icon="swap-right" width="1em" height="1em"
                          fill="currentColor" aria-hidden="true"><path
                          d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span>
                        </div>
                        <div class="pug-picker-input"><input readonly="" placeholder="结束日期" size="12" autocomplete="off"
                                                             value="2022-12-31"></div>
                        <div class="pug-picker-active-bar" style="left: 0px; width: 91px; position: absolute;"></div>
                        <span class="pug-picker-suffix"><span role="img" aria-label="calendar"
                                                              class="anticon anticon-calendar"><svg
                          viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em"
                          fill="currentColor" aria-hidden="true"><path
                          d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></span><span
                        class="pug-picker-clear"><span role="img" aria-label="close-circle"
                                                       class="anticon anticon-close-circle"><svg viewBox="64 64 896 896"
                                                                                                 focusable="false"
                                                                                                 data-icon="close-circle"
                                                                                                 width="1em"
                                                                                                 height="1em"
                                                                                                 fill="currentColor"
                                                                                                 aria-hidden="true"><path
                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="pug-tabs-content-holder">
                  <div class="pug-tabs-content pug-tabs-content-top">
                    <div role="tabpanel" tabindex="0" aria-hidden="false"
                         class="pug-tabs-tabpane pug-tabs-tabpane-active" id="rc-tabs-2-panel-sales"
                         aria-labelledby="rc-tabs-2-tab-sales">
                      <div class="pug-row" style="row-gap: 0px;">
                        <div class="pug-col pug-col-xs-24 pug-col-sm-24 pug-col-md-12 pug-col-lg-12 pug-col-xl-16">
                          <div class="salesBar___3JP41">
                            <div data-chart-source-type="G2Plot" size-sensor-id="29" style="height: inherit;">
                              <div style="position:relative;">

                                <div id="main1" style="width: 1066px;height: 300px"></div>

                                <div class="g2-tooltip"
                                     style="position: absolute; visibility: hidden; z-index: 8; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgb(255, 255, 255); box-shadow: rgb(174, 174, 174) 0px 0px 10px; border-radius: 3px; color: rgb(89, 89, 89); font-size: 12px; font-family: &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; line-height: 12px; padding: 0px 12px; opacity: 0.95; pointer-events: none; left: 853px; top: 7.85938px;">
                                  <div class="g2-tooltip-title" style="margin-bottom: 12px; margin-top: 12px;">12月</div>
                                  <ul class="g2-tooltip-list" style="margin: 0px; list-style-type: none; padding: 0px;">
                                    <li class="g2-tooltip-list-item" data-index=""
                                        style="list-style-type: none; padding: 0px; margin: 12px 0px;">
                                      <span class="g2-tooltip-marker"
                                            style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px;"></span>
                                      <span class="g2-tooltip-name">销售量</span>:
                                      <span class="g2-tooltip-value"
                                            style="display: inline-block; float: right; margin-left: 30px;">931</span>
                                    </li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="pug-col pug-col-xs-24 pug-col-sm-24 pug-col-md-12 pug-col-lg-12 pug-col-xl-8">
                          <div class="salesRank____67l0"><h4 class="rankingTitle___28H5N">门店销售额排名</h4>
                            <ul class="rankingList___2GuWM">
                              <li><span class="rankingItemNumber___31ZrU active___3Bsi9">1</span><span
                                class="rankingItemTitle___2Yoy1" title="工专路 0 号店">工专路 0 号店</span><span>323,234</span>
                              </li>
                              <li><span class="rankingItemNumber___31ZrU active___3Bsi9">2</span><span
                                class="rankingItemTitle___2Yoy1" title="工专路 1 号店">工专路 1 号店</span><span>323,234</span>
                              </li>
                              <li><span class="rankingItemNumber___31ZrU active___3Bsi9">3</span><span
                                class="rankingItemTitle___2Yoy1" title="工专路 2 号店">工专路 2 号店</span><span>323,234</span>
                              </li>
                              <li><span class="rankingItemNumber___31ZrU ">4</span><span
                                class="rankingItemTitle___2Yoy1" title="工专路 3 号店">工专路 3 号店</span><span>323,234</span>
                              </li>
                              <li><span class="rankingItemNumber___31ZrU ">5</span><span
                                class="rankingItemTitle___2Yoy1" title="工专路 4 号店">工专路 4 号店</span><span>323,234</span>
                              </li>
                              <li><span class="rankingItemNumber___31ZrU ">6</span><span
                                class="rankingItemTitle___2Yoy1" title="工专路 5 号店">工专路 5 号店</span><span>323,234</span>
                              </li>
                              <li><span class="rankingItemNumber___31ZrU ">7</span><span
                                class="rankingItemTitle___2Yoy1" title="工专路 6 号店">工专路 6 号店</span><span>323,234</span>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div role="tabpanel" tabindex="-1" aria-hidden="true" class="pug-tabs-tabpane"
                         id="rc-tabs-2-panel-views" aria-labelledby="rc-tabs-2-tab-views" style="display: none;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pug-row" style="margin-left: -12px; margin-right: -12px; margin-top: 24px; row-gap: 0px;">
          <div class="pug-col pug-col-xs-24 pug-col-sm-24 pug-col-md-24 pug-col-lg-24 pug-col-xl-12"
               style="padding-left: 12px; padding-right: 12px;">
            <div class="pug-card" style="height: 100%;">
              <div class="pug-card-head">
                <div class="pug-card-head-wrapper">
                  <div class="pug-card-head-title">线上热门搜索</div>
                  <div class="pug-card-extra"><span class="iconGroup___3RiPi"><span role="img" aria-label="ellipsis"
                                                                                    class="anticon anticon-ellipsis pug-dropdown-trigger"><svg
                    viewBox="64 64 896 896" focusable="false" data-icon="ellipsis" width="1em" height="1em"
                    fill="currentColor" aria-hidden="true"><path
                    d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></span>
                  </div>
                </div>
              </div>
              <div class="pug-card-body">
                <div class="pug-row" style="margin-left: -34px; margin-right: -34px; row-gap: 0px;">
                  <div class="pug-col pug-col-xs-24 pug-col-sm-12"
                       style="padding-left: 34px; padding-right: 34px; margin-bottom: 24px;">
                    <div class="numberInfo___UaaEB">
                      <div class="numberInfoSubTitle___3E3Dh" title=""><span>搜索用户数<span role="img"
                                                                                        aria-label="info-circle"
                                                                                        class="anticon anticon-info-circle"
                                                                                        style="margin-left: 8px;"><svg
                        viewBox="64 64 896 896" focusable="false" data-icon="info-circle" width="1em" height="1em"
                        fill="currentColor" aria-hidden="true"><path
                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path
                        d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path></svg></span></span>
                      </div>
                      <div class="numberInfoValue___87JVx" style="margin-top: 8px;"><span>12,321</span><span
                        class="subTotal___sq0f-">17.1<span role="img" aria-label="caret-up"
                                                           class="anticon anticon-caret-up"><svg viewBox="0 0 1024 1024"
                                                                                                 focusable="false"
                                                                                                 data-icon="caret-up"
                                                                                                 width="1em"
                                                                                                 height="1em"
                                                                                                 fill="currentColor"
                                                                                                 aria-hidden="true"><path
                        d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span></span>
                      </div>
                    </div>
                    <div data-chart-source-type="G2Plot" size-sensor-id="30" style="height: inherit;">
                      <div style="position:relative;">
                        <canvas width="348" height="45"
                                style="width: 348px; height: 45px; display: inline-block; vertical-align: middle;"></canvas>
                      </div>
                    </div>
                  </div>
                  <div class="pug-col pug-col-xs-24 pug-col-sm-12"
                       style="padding-left: 34px; padding-right: 34px; margin-bottom: 24px;">
                    <div class="numberInfo___UaaEB">
                      <div class="numberInfoSubTitle___3E3Dh" title=""><span>人均搜索次数<span role="img"
                                                                                         aria-label="info-circle"
                                                                                         class="anticon anticon-info-circle"
                                                                                         style="margin-left: 8px;"><svg
                        viewBox="64 64 896 896" focusable="false" data-icon="info-circle" width="1em" height="1em"
                        fill="currentColor" aria-hidden="true"><path
                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path
                        d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path></svg></span></span>
                      </div>
                      <div class="numberInfoValue___87JVx" style="margin-top: 8px;"><span>2.7</span><span
                        class="subTotal___sq0f-">26.2<span role="img" aria-label="caret-down"
                                                           class="anticon anticon-caret-down"><svg
                        viewBox="0 0 1024 1024" focusable="false" data-icon="caret-down" width="1em" height="1em"
                        fill="currentColor" aria-hidden="true"><path
                        d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span>
                      </div>
                    </div>
                    <div data-chart-source-type="G2Plot" size-sensor-id="31" style="height: inherit;">
                      <div style="position:relative;">
                        <canvas width="348" height="45"
                                style="width: 348px; height: 45px; display: inline-block; vertical-align: middle;"></canvas>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="pug-table-wrapper">
                  <div class="pug-spin-nested-loading">
                    <div class="pug-spin-container">
                      <div class="pug-table pug-table-small">
                        <div class="pug-table-container">
                          <div class="pug-table-content">
                            <table style="table-layout: auto;">
                              <colgroup></colgroup>
                              <thead class="pug-table-thead">
                              <tr>
                                <th class="pug-table-cell">排名</th>
                                <th class="pug-table-cell">搜索关键词</th>
                                <th class="pug-table-cell pug-table-column-has-sorters">
                                  <div class="pug-table-column-sorters"><span
                                    class="pug-table-column-title">用户数</span><span
                                    class="pug-table-column-sorter pug-table-column-sorter-full"><span
                                    class="pug-table-column-sorter-inner"><span role="img" aria-label="caret-up"
                                                                                class="anticon anticon-caret-up pug-table-column-sorter-up"><svg
                                    viewBox="0 0 1024 1024" focusable="false" data-icon="caret-up" width="1em"
                                    height="1em" fill="currentColor" aria-hidden="true"><path
                                    d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span><span
                                    role="img" aria-label="caret-down"
                                    class="anticon anticon-caret-down pug-table-column-sorter-down"><svg
                                    viewBox="0 0 1024 1024" focusable="false" data-icon="caret-down" width="1em"
                                    height="1em" fill="currentColor" aria-hidden="true"><path
                                    d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span></span>
                                  </div>
                                </th>
                                <th class="pug-table-cell pug-table-column-has-sorters">
                                  <div class="pug-table-column-sorters"><span
                                    class="pug-table-column-title">周涨幅</span><span
                                    class="pug-table-column-sorter pug-table-column-sorter-full"><span
                                    class="pug-table-column-sorter-inner"><span role="img" aria-label="caret-up"
                                                                                class="anticon anticon-caret-up pug-table-column-sorter-up"><svg
                                    viewBox="0 0 1024 1024" focusable="false" data-icon="caret-up" width="1em"
                                    height="1em" fill="currentColor" aria-hidden="true"><path
                                    d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span><span
                                    role="img" aria-label="caret-down"
                                    class="anticon anticon-caret-down pug-table-column-sorter-down"><svg
                                    viewBox="0 0 1024 1024" focusable="false" data-icon="caret-down" width="1em"
                                    height="1em" fill="currentColor" aria-hidden="true"><path
                                    d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span></span>
                                  </div>
                                </th>
                              </tr>
                              </thead>
                              <tbody class="pug-table-tbody">
                              <tr data-row-key="1" class="pug-table-row pug-table-row-level-0">
                                <td class="pug-table-cell">1</td>
                                <td class="pug-table-cell"><a href="/">搜索关键词-0</a></td>
                                <td class="pug-table-cell">617</td>
                                <td class="pug-table-cell">
                                  <div class="trendItem___2dudO" title=""><span><span
                                    style="margin-right: 4px;">45%</span></span><span class="up___1wFiw"><span
                                    role="img" aria-label="caret-up" class="anticon anticon-caret-up"><svg
                                    viewBox="0 0 1024 1024" focusable="false" data-icon="caret-up" width="1em"
                                    height="1em" fill="currentColor" aria-hidden="true"><path
                                    d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span></span>
                                  </div>
                                </td>
                              </tr>
                              <tr data-row-key="2" class="pug-table-row pug-table-row-level-0">
                                <td class="pug-table-cell">2</td>
                                <td class="pug-table-cell"><a href="/">搜索关键词-1</a></td>
                                <td class="pug-table-cell">505</td>
                                <td class="pug-table-cell">
                                  <div class="trendItem___2dudO" title=""><span><span
                                    style="margin-right: 4px;">32%</span></span><span class="down___2tA2-"><span
                                    role="img" aria-label="caret-down" class="anticon anticon-caret-down"><svg
                                    viewBox="0 0 1024 1024" focusable="false" data-icon="caret-down" width="1em"
                                    height="1em" fill="currentColor" aria-hidden="true"><path
                                    d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span>
                                  </div>
                                </td>
                              </tr>
                              <tr data-row-key="3" class="pug-table-row pug-table-row-level-0">
                                <td class="pug-table-cell">3</td>
                                <td class="pug-table-cell"><a href="/">搜索关键词-2</a></td>
                                <td class="pug-table-cell">333</td>
                                <td class="pug-table-cell">
                                  <div class="trendItem___2dudO" title=""><span><span
                                    style="margin-right: 4px;">31%</span></span><span class="down___2tA2-"><span
                                    role="img" aria-label="caret-down" class="anticon anticon-caret-down"><svg
                                    viewBox="0 0 1024 1024" focusable="false" data-icon="caret-down" width="1em"
                                    height="1em" fill="currentColor" aria-hidden="true"><path
                                    d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span>
                                  </div>
                                </td>
                              </tr>
                              <tr data-row-key="4" class="pug-table-row pug-table-row-level-0">
                                <td class="pug-table-cell">4</td>
                                <td class="pug-table-cell"><a href="/">搜索关键词-3</a></td>
                                <td class="pug-table-cell">569</td>
                                <td class="pug-table-cell">
                                  <div class="trendItem___2dudO" title=""><span><span
                                    style="margin-right: 4px;">49%</span></span><span class="down___2tA2-"><span
                                    role="img" aria-label="caret-down" class="anticon anticon-caret-down"><svg
                                    viewBox="0 0 1024 1024" focusable="false" data-icon="caret-down" width="1em"
                                    height="1em" fill="currentColor" aria-hidden="true"><path
                                    d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span>
                                  </div>
                                </td>
                              </tr>
                              <tr data-row-key="5" class="pug-table-row pug-table-row-level-0">
                                <td class="pug-table-cell">5</td>
                                <td class="pug-table-cell"><a href="/">搜索关键词-4</a></td>
                                <td class="pug-table-cell">697</td>
                                <td class="pug-table-cell">
                                  <div class="trendItem___2dudO" title=""><span><span
                                    style="margin-right: 4px;">70%</span></span><span class="up___1wFiw"><span
                                    role="img" aria-label="caret-up" class="anticon anticon-caret-up"><svg
                                    viewBox="0 0 1024 1024" focusable="false" data-icon="caret-up" width="1em"
                                    height="1em" fill="currentColor" aria-hidden="true"><path
                                    d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span></span>
                                  </div>
                                </td>
                              </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </div>
                      <ul class="pug-pagination mini pug-table-pagination pug-table-pagination-right"
                          unselectable="unselectable" style="margin-bottom: 0px;">
                        <li title="上一页" class="pug-pagination-prev pug-pagination-disabled" aria-disabled="true">
                          <button class="pug-pagination-item-link" type="button" tabindex="-1" disabled=""><span
                            role="img" aria-label="left" class="anticon anticon-left"><svg viewBox="64 64 896 896"
                                                                                           focusable="false"
                                                                                           data-icon="left" width="1em"
                                                                                           height="1em"
                                                                                           fill="currentColor"
                                                                                           aria-hidden="true"><path
                            d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span>
                          </button>
                        </li>
                        <li title="1" class="pug-pagination-item pug-pagination-item-1 pug-pagination-item-active"
                            tabindex="0"><a rel="nofollow">1</a></li>
                        <li title="2" class="pug-pagination-item pug-pagination-item-2" tabindex="0"><a
                          rel="nofollow">2</a></li>
                        <li title="3" class="pug-pagination-item pug-pagination-item-3" tabindex="0"><a
                          rel="nofollow">3</a></li>
                        <li title="4" class="pug-pagination-item pug-pagination-item-4" tabindex="0"><a
                          rel="nofollow">4</a></li>
                        <li title="5"
                            class="pug-pagination-item pug-pagination-item-5 pug-pagination-item-before-jump-next"
                            tabindex="0"><a rel="nofollow">5</a></li>
                        <li title="向后 5 页" tabindex="0"
                            class="pug-pagination-jump-next pug-pagination-jump-next-custom-icon"><a
                          class="pug-pagination-item-link">
                          <div class="pug-pagination-item-container"><span role="img" aria-label="double-right"
                                                                           class="anticon anticon-double-right pug-pagination-item-link-icon"><svg
                            viewBox="64 64 896 896" focusable="false" data-icon="double-right" width="1em" height="1em"
                            fill="currentColor" aria-hidden="true"><path
                            d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 00188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 00492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"></path></svg></span><span
                            class="pug-pagination-item-ellipsis">•••</span></div>
                        </a></li>
                        <li title="10" class="pug-pagination-item pug-pagination-item-10" tabindex="0"><a
                          rel="nofollow">10</a></li>
                        <li title="下一页" tabindex="0" class="pug-pagination-next" aria-disabled="false">
                          <button class="pug-pagination-item-link" type="button" tabindex="-1"><span role="img"
                                                                                                     aria-label="right"
                                                                                                     class="anticon anticon-right"><svg
                            viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em"
                            fill="currentColor" aria-hidden="true"><path
                            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span>
                          </button>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pug-col pug-col-xs-24 pug-col-sm-24 pug-col-md-24 pug-col-lg-24 pug-col-xl-12"
               style="padding-left: 12px; padding-right: 12px;">
            <div class="pug-card salesCard___1Iqf3" style="height: 100%;">
              <div class="pug-card-head">
                <div class="pug-card-head-wrapper">
                  <div class="pug-card-head-title">销售额类别占比</div>
                  <div class="pug-card-extra">
                    <div class="salesCardExtra___1yLFX"><span class="iconGroup___3RiPi"><span role="img"
                                                                                              aria-label="ellipsis"
                                                                                              class="anticon anticon-ellipsis pug-dropdown-trigger"><svg
                      viewBox="64 64 896 896" focusable="false" data-icon="ellipsis" width="1em" height="1em"
                      fill="currentColor" aria-hidden="true"><path
                      d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></span>
                      <div class="salesTypeRadio___2LyMm">
                        <div class="pug-radio-group pug-radio-group-outline"><label
                          class="pug-radio-button-wrapper pug-radio-button-wrapper-checked"><span
                          class="pug-radio-button pug-radio-button-checked"><input type="radio"
                                                                                   class="pug-radio-button-input"
                                                                                   value="all" checked=""><span
                          class="pug-radio-button-inner"></span></span><span>全部渠道</span></label><label
                          class="pug-radio-button-wrapper"><span class="pug-radio-button"><input type="radio"
                                                                                                 class="pug-radio-button-input"
                                                                                                 value="online"><span
                          class="pug-radio-button-inner"></span></span><span>线上</span></label><label
                          class="pug-radio-button-wrapper"><span class="pug-radio-button"><input type="radio"
                                                                                                 class="pug-radio-button-input"
                                                                                                 value="stores"><span
                          class="pug-radio-button-inner"></span></span><span>门店</span></label></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="pug-card-body">
                <div><span class="pug-typography" direction="ltr">销售额</span>
                  <div style="height: inherit;" data-chart-source-type="G2Plot" size-sensor-id="32">
                    <div style="position:relative;">
                      <canvas width="764" height="300"
                              style="width: 764px; height: 300px; display: inline-block; vertical-align: middle; cursor: default;"></canvas>
                      <div class="g2-html-annotation"
                           style="pointer-events: none; width: 192px; transform: translate(-50%, -100%); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; justify-content: center; align-items: center; text-shadow: 0px 0px 0px; -webkit-text-stroke: 0px; font-weight: 300; color: rgb(75, 83, 94); text-align: center; font-size: 20px; line-height: 1; position: absolute; left: 382px; top: 150px; z-index: 7;">
                        销售额
                      </div>
                      <div class="g2-html-annotation"
                           style="pointer-events: none; width: 192px; transform: translate(-50%, 0px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; justify-content: center; align-items: center; text-shadow: 0px 0px 0px; -webkit-text-stroke: 0px; font-weight: bold; color: rgba(44, 53, 66, 0.85); text-align: center; font-size: 32px; line-height: 1; position: absolute; left: 382px; top: 150px; z-index: 7;">
                        15781
                      </div>
                      <div class="g2-tooltip"
                           style="position: absolute; visibility: hidden; z-index: 8; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgb(255, 255, 255); box-shadow: rgb(174, 174, 174) 0px 0px 10px; border-radius: 3px; color: rgb(89, 89, 89); font-size: 12px; font-family: &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; line-height: 12px; padding: 0px 12px; opacity: 0.95; pointer-events: none; left: 374.5px; top: 8.71875px;">
                        <div class="g2-tooltip-title" style="margin-bottom: 12px; margin-top: 12px;"></div>
                        <ul class="g2-tooltip-list" style="margin: 0px; list-style-type: none; padding: 0px;">
                          <li class="g2-tooltip-list-item" data-index=""
                              style="list-style-type: none; padding: 0px; margin: 12px 0px;">
                            <span class="g2-tooltip-marker"
                                  style="background: rgb(109, 200, 236); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px;"></span>
                            <span class="g2-tooltip-name">其他</span>:
                            <span class="g2-tooltip-value"
                                  style="display: inline-block; float: right; margin-left: 30px;">1231</span>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pug-card offlineCard___Oqn6V" style="margin-top: 32px;">
          <div class="pug-card-body">
            <div class="pug-tabs pug-tabs-top">
              <div role="tablist" class="pug-tabs-nav">
                <div class="pug-tabs-nav-wrap pug-tabs-nav-wrap-ping-right">
                  <div class="pug-tabs-nav-list" style="transform: translate(0px, 0px);">
                    <div class="pug-tabs-tab pug-tabs-tab-active">
                      <div role="tab" aria-selected="true" class="pug-tabs-tab-btn" tabindex="0"
                           id="rc-tabs-3-tab-Stores 0" aria-controls="rc-tabs-3-panel-Stores 0">
                        <div class="pug-row" style="margin: 8px 0px; width: 138px; row-gap: 0px;">
                          <div class="pug-col pug-col-12" style="padding-left: 4px; padding-right: 4px;">
                            <div class="numberInfo___UaaEB">
                              <div class="numberInfoTitle___1p55z" title="Stores 0">Stores 0</div>
                              <div class="numberInfoSubTitle___3E3Dh" title="转化率">转化率</div>
                              <div class="numberInfoValue___87JVx" style="margin-top: 2px;"><span>60%</span></div>
                            </div>
                          </div>
                          <div class="pug-col pug-col-12"
                               style="padding-left: 4px; padding-right: 4px; padding-top: 36px;">
                            <div data-chart-source-type="G2Plot" size-sensor-id="33" style="height: inherit;">
                              <div style="position:relative;">
                                <canvas width="61" height="60"
                                        style="width: 61px; height: 60px; display: inline-block; vertical-align: middle;"></canvas>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="pug-tabs-tab">
                      <div role="tab" aria-selected="false" class="pug-tabs-tab-btn" tabindex="0"
                           id="rc-tabs-3-tab-Stores 1" aria-controls="rc-tabs-3-panel-Stores 1">
                        <div class="pug-row" style="margin: 8px 0px; width: 138px; row-gap: 0px;">
                          <div class="pug-col pug-col-12" style="padding-left: 4px; padding-right: 4px;">
                            <div class="numberInfo___UaaEB numberInfolight___YO5rJ">
                              <div class="numberInfoTitle___1p55z" title="Stores 1">Stores 1</div>
                              <div class="numberInfoSubTitle___3E3Dh" title="转化率">转化率</div>
                              <div class="numberInfoValue___87JVx" style="margin-top: 2px;"><span>30%</span></div>
                            </div>
                          </div>
                          <div class="pug-col pug-col-12"
                               style="padding-left: 4px; padding-right: 4px; padding-top: 36px;">
                            <div data-chart-source-type="G2Plot" size-sensor-id="34" style="height: inherit;">
                              <div style="position:relative;">
                                <canvas width="61" height="60"
                                        style="width: 61px; height: 60px; display: inline-block; vertical-align: middle;"></canvas>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="pug-tabs-tab">
                      <div role="tab" aria-selected="false" class="pug-tabs-tab-btn" tabindex="0"
                           id="rc-tabs-3-tab-Stores 2" aria-controls="rc-tabs-3-panel-Stores 2">
                        <div class="pug-row" style="margin: 8px 0px; width: 138px; row-gap: 0px;">
                          <div class="pug-col pug-col-12" style="padding-left: 4px; padding-right: 4px;">
                            <div class="numberInfo___UaaEB numberInfolight___YO5rJ">
                              <div class="numberInfoTitle___1p55z" title="Stores 2">Stores 2</div>
                              <div class="numberInfoSubTitle___3E3Dh" title="转化率">转化率</div>
                              <div class="numberInfoValue___87JVx" style="margin-top: 2px;"><span>90%</span></div>
                            </div>
                          </div>
                          <div class="pug-col pug-col-12"
                               style="padding-left: 4px; padding-right: 4px; padding-top: 36px;">
                            <div data-chart-source-type="G2Plot" size-sensor-id="35" style="height: inherit;">
                              <div style="position:relative;">
                                <canvas width="61" height="60"
                                        style="width: 61px; height: 60px; display: inline-block; vertical-align: middle;"></canvas>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="pug-tabs-tab">
                      <div role="tab" aria-selected="false" class="pug-tabs-tab-btn" tabindex="0"
                           id="rc-tabs-3-tab-Stores 3" aria-controls="rc-tabs-3-panel-Stores 3">
                        <div class="pug-row" style="margin: 8px 0px; width: 138px; row-gap: 0px;">
                          <div class="pug-col pug-col-12" style="padding-left: 4px; padding-right: 4px;">
                            <div class="numberInfo___UaaEB numberInfolight___YO5rJ">
                              <div class="numberInfoTitle___1p55z" title="Stores 3">Stores 3</div>
                              <div class="numberInfoSubTitle___3E3Dh" title="转化率">转化率</div>
                              <div class="numberInfoValue___87JVx" style="margin-top: 2px;"><span>50%</span></div>
                            </div>
                          </div>
                          <div class="pug-col pug-col-12"
                               style="padding-left: 4px; padding-right: 4px; padding-top: 36px;">
                            <div data-chart-source-type="G2Plot" size-sensor-id="36" style="height: inherit;">
                              <div style="position:relative;">
                                <canvas width="61" height="60"
                                        style="width: 61px; height: 60px; display: inline-block; vertical-align: middle;"></canvas>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="pug-tabs-tab">
                      <div role="tab" aria-selected="false" class="pug-tabs-tab-btn" tabindex="0"
                           id="rc-tabs-3-tab-Stores 4" aria-controls="rc-tabs-3-panel-Stores 4">
                        <div class="pug-row" style="margin: 8px 0px; width: 138px; row-gap: 0px;">
                          <div class="pug-col pug-col-12" style="padding-left: 4px; padding-right: 4px;">
                            <div class="numberInfo___UaaEB numberInfolight___YO5rJ">
                              <div class="numberInfoTitle___1p55z" title="Stores 4">Stores 4</div>
                              <div class="numberInfoSubTitle___3E3Dh" title="转化率">转化率</div>
                              <div class="numberInfoValue___87JVx" style="margin-top: 2px;"><span>80%</span></div>
                            </div>
                          </div>
                          <div class="pug-col pug-col-12"
                               style="padding-left: 4px; padding-right: 4px; padding-top: 36px;">
                            <div data-chart-source-type="G2Plot" size-sensor-id="37" style="height: inherit;">
                              <div style="position:relative;">
                                <canvas width="61" height="60"
                                        style="width: 61px; height: 60px; display: inline-block; vertical-align: middle;"></canvas>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="pug-tabs-tab">
                      <div role="tab" aria-selected="false" class="pug-tabs-tab-btn" tabindex="0"
                           id="rc-tabs-3-tab-Stores 5" aria-controls="rc-tabs-3-panel-Stores 5">
                        <div class="pug-row" style="margin: 8px 0px; width: 138px; row-gap: 0px;">
                          <div class="pug-col pug-col-12" style="padding-left: 4px; padding-right: 4px;">
                            <div class="numberInfo___UaaEB numberInfolight___YO5rJ">
                              <div class="numberInfoTitle___1p55z" title="Stores 5">Stores 5</div>
                              <div class="numberInfoSubTitle___3E3Dh" title="转化率">转化率</div>
                              <div class="numberInfoValue___87JVx" style="margin-top: 2px;"><span>50%</span></div>
                            </div>
                          </div>
                          <div class="pug-col pug-col-12"
                               style="padding-left: 4px; padding-right: 4px; padding-top: 36px;">
                            <div data-chart-source-type="G2Plot" size-sensor-id="38" style="height: inherit;">
                              <div style="position:relative;">
                                <canvas width="61" height="60"
                                        style="width: 61px; height: 60px; display: inline-block; vertical-align: middle;"></canvas>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="pug-tabs-tab">
                      <div role="tab" aria-selected="false" class="pug-tabs-tab-btn" tabindex="0"
                           id="rc-tabs-3-tab-Stores 6" aria-controls="rc-tabs-3-panel-Stores 6">
                        <div class="pug-row" style="margin: 8px 0px; width: 138px; row-gap: 0px;">
                          <div class="pug-col pug-col-12" style="padding-left: 4px; padding-right: 4px;">
                            <div class="numberInfo___UaaEB numberInfolight___YO5rJ">
                              <div class="numberInfoTitle___1p55z" title="Stores 6">Stores 6</div>
                              <div class="numberInfoSubTitle___3E3Dh" title="转化率">转化率</div>
                              <div class="numberInfoValue___87JVx" style="margin-top: 2px;"><span>40%</span></div>
                            </div>
                          </div>
                          <div class="pug-col pug-col-12"
                               style="padding-left: 4px; padding-right: 4px; padding-top: 36px;">
                            <div data-chart-source-type="G2Plot" size-sensor-id="39" style="height: inherit;">
                              <div style="position:relative;">
                                <canvas width="61" height="60"
                                        style="width: 61px; height: 60px; display: inline-block; vertical-align: middle;"></canvas>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="pug-tabs-tab">
                      <div role="tab" aria-selected="false" class="pug-tabs-tab-btn" tabindex="0"
                           id="rc-tabs-3-tab-Stores 7" aria-controls="rc-tabs-3-panel-Stores 7">
                        <div class="pug-row" style="margin: 8px 0px; width: 138px; row-gap: 0px;">
                          <div class="pug-col pug-col-12" style="padding-left: 4px; padding-right: 4px;">
                            <div class="numberInfo___UaaEB numberInfolight___YO5rJ">
                              <div class="numberInfoTitle___1p55z" title="Stores 7">Stores 7</div>
                              <div class="numberInfoSubTitle___3E3Dh" title="转化率">转化率</div>
                              <div class="numberInfoValue___87JVx" style="margin-top: 2px;"><span>10%</span></div>
                            </div>
                          </div>
                          <div class="pug-col pug-col-12"
                               style="padding-left: 4px; padding-right: 4px; padding-top: 36px;">
                            <div data-chart-source-type="G2Plot" size-sensor-id="40" style="height: inherit;">
                              <div style="position:relative;">
                                <canvas width="61" height="60"
                                        style="width: 61px; height: 60px; display: inline-block; vertical-align: middle;"></canvas>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="pug-tabs-tab">
                      <div role="tab" aria-selected="false" class="pug-tabs-tab-btn" tabindex="0"
                           id="rc-tabs-3-tab-Stores 8" aria-controls="rc-tabs-3-panel-Stores 8">
                        <div class="pug-row" style="margin: 8px 0px; width: 138px; row-gap: 0px;">
                          <div class="pug-col pug-col-12" style="padding-left: 4px; padding-right: 4px;">
                            <div class="numberInfo___UaaEB numberInfolight___YO5rJ">
                              <div class="numberInfoTitle___1p55z" title="Stores 8">Stores 8</div>
                              <div class="numberInfoSubTitle___3E3Dh" title="转化率">转化率</div>
                              <div class="numberInfoValue___87JVx" style="margin-top: 2px;"><span>30%</span></div>
                            </div>
                          </div>
                          <div class="pug-col pug-col-12"
                               style="padding-left: 4px; padding-right: 4px; padding-top: 36px;">
                            <div data-chart-source-type="G2Plot" size-sensor-id="41" style="height: inherit;">
                              <div style="position:relative;">
                                <canvas width="61" height="60"
                                        style="width: 61px; height: 60px; display: inline-block; vertical-align: middle;"></canvas>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="pug-tabs-tab">
                      <div role="tab" aria-selected="false" class="pug-tabs-tab-btn" tabindex="0"
                           id="rc-tabs-3-tab-Stores 9" aria-controls="rc-tabs-3-panel-Stores 9">
                        <div class="pug-row" style="margin: 8px 0px; width: 138px; row-gap: 0px;">
                          <div class="pug-col pug-col-12" style="padding-left: 4px; padding-right: 4px;">
                            <div class="numberInfo___UaaEB numberInfolight___YO5rJ">
                              <div class="numberInfoTitle___1p55z" title="Stores 9">Stores 9</div>
                              <div class="numberInfoSubTitle___3E3Dh" title="转化率">转化率</div>
                              <div class="numberInfoValue___87JVx" style="margin-top: 2px;"><span>30%</span></div>
                            </div>
                          </div>
                          <div class="pug-col pug-col-12"
                               style="padding-left: 4px; padding-right: 4px; padding-top: 36px;">
                            <div data-chart-source-type="G2Plot" size-sensor-id="42" style="height: inherit;">
                              <div style="position:relative;">
                                <canvas width="61" height="60"
                                        style="width: 61px; height: 60px; display: inline-block; vertical-align: middle;"></canvas>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="pug-tabs-ink-bar pug-tabs-ink-bar-animated" style="left: 0px; width: 138px;"></div>
                  </div>
                </div>
                <div class="pug-tabs-nav-operations">
                  <button type="button" class="pug-tabs-nav-more" tabindex="-1" aria-hidden="true"
                          aria-haspopup="listbox" aria-controls="rc-tabs-3-more-popup" id="rc-tabs-3-more"
                          aria-expanded="false" style=""><span role="img" aria-label="ellipsis"
                                                               class="anticon anticon-ellipsis"><svg
                    viewBox="64 64 896 896" focusable="false" data-icon="ellipsis" width="1em" height="1em"
                    fill="currentColor" aria-hidden="true"><path
                    d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span>
                  </button>
                </div>
              </div>
              <div class="pug-tabs-content-holder">
                <div class="pug-tabs-content pug-tabs-content-top">
                  <div role="tabpanel" tabindex="0" aria-hidden="false" class="pug-tabs-tabpane pug-tabs-tabpane-active"
                       id="rc-tabs-3-panel-Stores 0" aria-labelledby="rc-tabs-3-tab-Stores 0">
                    <div style="padding: 0px 24px;">
                      <div data-chart-source-type="G2Plot" size-sensor-id="43" style="height: inherit;">
                        <div style="position:relative;">
                          <canvas width="1551" height="400"
                                  style="width: 1551px; height: 400px; display: inline-block; vertical-align: middle; cursor: default;"></canvas>
                          <div class="g2-tooltip"
                               style="position: absolute; visibility: hidden; z-index: 8; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgb(255, 255, 255); box-shadow: rgb(174, 174, 174) 0px 0px 10px; border-radius: 3px; color: rgb(89, 89, 89); font-size: 12px; font-family: &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; line-height: 12px; padding: 0px 12px; opacity: 0.95; pointer-events: none; left: 1044px; top: 119.578px;">
                            <div class="g2-tooltip-title" style="margin-bottom: 12px; margin-top: 12px;">09:05</div>
                            <ul class="g2-tooltip-list" style="margin: 0px; list-style-type: none; padding: 0px;">
                              <li class="g2-tooltip-list-item" data-index=""
                                  style="list-style-type: none; padding: 0px; margin: 12px 0px;">
                                <span class="g2-tooltip-marker"
                                      style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px;"></span>
                                <span class="g2-tooltip-name">客流量</span>:
                                <span class="g2-tooltip-value"
                                      style="display: inline-block; float: right; margin-left: 30px;">12</span>
                              </li>
                              <li class="g2-tooltip-list-item" data-index=""
                                  style="list-style-type: none; padding: 0px; margin: 12px 0px;">
                                <span class="g2-tooltip-marker"
                                      style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px;"></span>
                                <span class="g2-tooltip-name">支付笔数</span>:
                                <span class="g2-tooltip-value"
                                      style="display: inline-block; float: right; margin-left: 30px;">82</span>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div role="tabpanel" tabindex="-1" aria-hidden="true" class="pug-tabs-tabpane"
                       id="rc-tabs-3-panel-Stores 1" aria-labelledby="rc-tabs-3-tab-Stores 1"
                       style="display: none;"></div>
                  <div role="tabpanel" tabindex="-1" aria-hidden="true" class="pug-tabs-tabpane"
                       id="rc-tabs-3-panel-Stores 2" aria-labelledby="rc-tabs-3-tab-Stores 2"
                       style="display: none;"></div>
                  <div role="tabpanel" tabindex="-1" aria-hidden="true" class="pug-tabs-tabpane"
                       id="rc-tabs-3-panel-Stores 3" aria-labelledby="rc-tabs-3-tab-Stores 3"
                       style="display: none;"></div>
                  <div role="tabpanel" tabindex="-1" aria-hidden="true" class="pug-tabs-tabpane"
                       id="rc-tabs-3-panel-Stores 4" aria-labelledby="rc-tabs-3-tab-Stores 4"
                       style="display: none;"></div>
                  <div role="tabpanel" tabindex="-1" aria-hidden="true" class="pug-tabs-tabpane"
                       id="rc-tabs-3-panel-Stores 5" aria-labelledby="rc-tabs-3-tab-Stores 5"
                       style="display: none;"></div>
                  <div role="tabpanel" tabindex="-1" aria-hidden="true" class="pug-tabs-tabpane"
                       id="rc-tabs-3-panel-Stores 6" aria-labelledby="rc-tabs-3-tab-Stores 6"
                       style="display: none;"></div>
                  <div role="tabpanel" tabindex="-1" aria-hidden="true" class="pug-tabs-tabpane"
                       id="rc-tabs-3-panel-Stores 7" aria-labelledby="rc-tabs-3-tab-Stores 7"
                       style="display: none;"></div>
                  <div role="tabpanel" tabindex="-1" aria-hidden="true" class="pug-tabs-tabpane"
                       id="rc-tabs-3-panel-Stores 8" aria-labelledby="rc-tabs-3-tab-Stores 8"
                       style="display: none;"></div>
                  <div role="tabpanel" tabindex="-1" aria-hidden="true" class="pug-tabs-tabpane"
                       id="rc-tabs-3-panel-Stores 9" aria-labelledby="rc-tabs-3-tab-Stores 9"
                       style="display: none;"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "Home.vue",
  data(){
    return {
      sketon:true
    }
  },

  mounted() {
    this.$nextTick(() => {
      // setTimeout(()=>{
      //   this.sketon = true;
      // },1000)

      this.loadCharts("main1", {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Line 1',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165)'
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [140, 232, 101, 264, 90, 340, 250]
          },
          {
            name: 'Line 2',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(0, 221, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(77, 119, 255)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 282, 111, 234, 220, 340, 310]
          },
          {
            name: 'Line 3',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(55, 162, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(116, 21, 219)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [320, 132, 201, 334, 190, 130, 220]
          },
          {
            name: 'Line 4',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 0, 135)'
                },
                {
                  offset: 1,
                  color: 'rgb(135, 0, 157)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [220, 402, 231, 134, 190, 230, 120]
          },
          {
            name: 'Line 5',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 191, 0)'
                },
                {
                  offset: 1,
                  color: 'rgb(224, 62, 76)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [220, 302, 181, 234, 210, 290, 150]
          }
        ]
      })
      this.loadCharts("main2", {
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {value: 1048, name: 'Search Engine'},
              {value: 735, name: 'Direct'},
              {value: 580, name: 'Email'},
              {value: 484, name: 'Union Ads'},
              {value: 300, name: 'Video Ads'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
      this.loadCharts("main3")
      this.loadCharts("main4", {
        title: {
          text: 'Proportion of Browsers',
          subtext: 'Fake Data',
          top: 10,
          left: 10
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          bottom: 10,
          data: (function () {
            var list = [];
            for (var i = 1; i <= 28; i++) {
              list.push(i + 2000 + '');
            }
            return list;
          })()
        },
        visualMap: {
          top: 'middle',
          right: 10,
          color: ['red', 'yellow'],
          calculable: true
        },
        radar: {
          indicator: [
            {text: 'IE8-', max: 400},
            {text: 'IE9+', max: 400},
            {text: 'Safari', max: 400},
            {text: 'Firefox', max: 400},
            {text: 'Chrome', max: 400}
          ]
        },
        series: (function () {
          var series = [];
          for (var i = 1; i <= 28; i++) {
            series.push({
              type: 'radar',
              symbol: 'none',
              lineStyle: {
                width: 1
              },
              emphasis: {
                areaStyle: {
                  color: 'rgba(0,250,0,0.3)'
                }
              },
              data: [
                {
                  value: [
                    (40 - i) * 10,
                    (38 - i) * 4 + 60,
                    i * 5 + 10,
                    i * 9,
                    (i * i) / 2
                  ],
                  name: i + 2000 + ''
                }
              ]
            });
          }
          return series;
        })()
      })
    })

  },
  methods: {
    loadCharts(id, options) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(id));
      // 绘制图表
      myChart.setOption(options || {
        title: {
          text: ''
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });
    }
  }
}
</script>

<style>
.chartsbox2 {
  display: grid;
  padding: 10px 10px 10px;
}

.chartsbox {
  display: grid;
  padding: 10px;
  grid-template-columns: repeat(3, 32.5%);
  justify-content: space-between;
  grid-template-rows: repeat(1, 50%);
  gap: 2% 1%;
}

.chartsbox2 div.chartbox, .chartsbox div.chartbox {
  box-shadow: 0 0 1em #eee;
  width: 100% !important;
}

.chartsbox canvas,
.chartsbox2 canvas {
  width: 100% !important;
}

@keyframes loading {
  0% {
    background-position: -400px 0
  }

  100% {
    background-position: 400px 0
  }
}

.box1 {
  position: absolute;
  margin: 0 auto;
  left: 50%;
  margin-left: -400px;
  top: 0;
  width: 800px;
  height: 60px;
  background-color: blue;
  background-image: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: loading;
  animation-timing-function: linear;
  transition: 0.3s;
}
.bgMasker {
  background-color: #fff;
}

.line1 {
  background-color: #fff;
  height: 20px;
  position: absolute;
  right: 0;
  top: 0;
  left: 60px;
}

.line2 {
  background-color: #fff;
  height: 20px;
  position: absolute;
  right: 700px;
  top: 20px;
  left: 60px;
}

.line3 {
  background-color: #fff;
  height: 20px;
  position: absolute;
  left: 400px;
  right: 0;
  top: 20px;
}

.line4 {
  background-color: #fff;
  height: 20px;
  top: 40px;
  position: absolute;
  left: 60px;
  right: 500px;
}

.line5 {
  background-color: #fff;
  height: 20px;
  position: absolute;
  left: 600px;
  right: 0;
  top: 40px;
}
</style>
